<template>
	<view class="billWrap">
	
	    <view class="top_bc" :style="{background:'linear-gradient(180deg, ' + this.$COLOR + ' 0%, '+ this.$CHANGEE+' 100%)'} "></view>
	
	
	    <view class="content">
	      <view class="content_border"></view>
	
	      <view class="con"  v-if="isRefresh">
	        
	        <view class="con_top">
	           <view class="con_top_text">{{productOrderRecordVoList[thisMonthIndex].timerHanZi}}付款</view>
				<view class="con_top_num" v-if="productOrderRecordVoList[thisMonthIndex].payment == 1">{{productOrderRecordVoList[thisMonthIndex].paide == 0 ? productOrderRecordVoList[thisMonthIndex].price :( productOrderRecordVoList[thisMonthIndex].paide / 100).toFixed(2)}} <text class="con_top_num_text">元</text> </view>
				<view class="con_top_num" v-else>{{(productOrderRecordVoList[thisMonthIndex].price - productOrderRecordVoList[thisMonthIndex].paide / 100).toFixed(2)}} <text class="con_top_num_text">元</text> </view>
				<view class="con_top_text">{{goodsData.title}}</view>
	        </view>
	
	       <!-- <view class="buyBreak" v-if="buyBreakSta" @tap="orderBuyout" >
	          <text>不想归还？现在立即买断</text>
	          <text class="iconfont icon-fangxiangyou buyBreak_icon"></text>
	        </view> -->
	
	        <view class="con_top_border">
	          <view class="con_top_border_circle con_top_border_circleL" :class="[buyBreakSta?'con_top_border_circleT':'']"></view>
	          <view class="con_top_border_line"></view>
	          <view class="con_top_border_circle  con_top_border_circleR " :class="[buyBreakSta?'con_top_border_circleT':'']"></view>
	        </view>
			
			<view class="rent_planning">
			          <view class="rent_planning_text1">
			            <view class="rent_planning_text2">
			              ¥{{grossRent.toFixed(2)}}
			
			            </view>
			            <view class="rent_planning_text3">
			              应支付金额
			
			            </view>
			          </view>
			          
			          <view class="rent_planning_text1">
			            <view class="rent_planning_text2">
			              ¥{{paid.toFixed(2)}}
			
			              
			            </view>
			
			            <view class="rent_planning_text3">
			            已支付金额
			              
			            </view>
			
			          </view>
			         
			          <view class="rent_planning_text1">
			            <view class="rent_planning_text2">
			              ¥{{unpaid.toFixed(2)}}
			
			              
			            </view>
			            <view class="rent_planning_text3">
			            未支付金额
			              
			            </view>
			
			          </view>
					</view>
	
	        <view class="residue_tit">本次账单剩余 <text style="color:#ffcb31;">{{' '+surplusNum}}期</text> </view>
	
	        <view class="list">
	          <view class="list_min" v-for="item in productOrderRecordVoList">
	            <view class="list_min_timer">
	              <view class="list_min_timer_top">{{item.expiretime}}</view>
	              <view class="list_min_timer_bot " :class="[item.thisMonth?'list_min_timer_botT':'']">第{{item.period}}/{{productOrderRecordVoList.length}}期</view>
	            </view>
	            <view class="list_min_linellae">
	              <view class="list_min_linellae_round" :class="[item.thisMonth?'list_min_linellae_roundT':'']"></view>
	              <view class="list_min_linellae_vertical"></view>
	            </view>
				
				
				<view class="list_min_num " :class="[item.thisMonth?'list_min_numT':'']" v-if=" item.payment == 1 ">¥{{item.paide == 0?item.price:(item.paide / 100).toFixed(2)}}</view>
				<view class="list_min_num " :class="[item.thisMonth?'list_min_numT':'']"  v-else>¥{{(item.price - (item.paide / 100)).toFixed(2)}}</view>
	
	
				<view class="list_min_staText " :class="[item.thisMonth?'list_min_staTextT':'']" v-if=" item.payment != 4 ">{{item.payment == 1?(item.thirdPartyPaidType==1?'未付款':'已付款'):(item.thisMonth?'本期待付':'未付款')}}</view>
				<view class="list_min_staText " :class="[item.thisMonth?'list_min_staTextT':'']" v-else>已付款¥{{(item.paide/100).toFixed(2)}}元</view>
				
			  </view>
	        </view>
	
	
	
	
	        <view class="con_bottom_circle">
	          <view v-for="item in 12" class="con_bottom_circle_min"></view>
	        </view>
	
	      </view>
	
	
	    </view>
	
	
	    <view class="bottom_zhan"></view>
	
	
	    <view class="footer">
	      <view class="footer_L" @tap="earlyRepayment(oid)">提前付款</view>
	      <view class="footer_R" @tap="onpay(productOrderRecordVoList[thisMonthIndex])">本期付款</view>
	    </view>
	
	
	    <!-- 老的 -->
	    <!-- <view class="bill-centent">
	        <view class="bill-item" a:for="{{productOrderRecordVoList}}">
	            <view class="item-top">
	                <text>第{{item.period}}期</text>
	                <text>租期：</text>
	                <text>{{item.expiretime}} - {{item.duetime}}</text>
	            </view>
	            <view class="item-main">
	                <view class="main-left">
	                    <text a:if="{{!item.payment}}">本期还款</text>
	                    <text a:else>本期已还款</text>
	                    <text style="font-weight:600;">￥{{item.price}}</text>
	                </view>
	                <view class="main-right">
	                    <view>交租日期：{{item.expiretime}}之前</view>
	                    <view>提前还款有助于提高信用额度</view>
	                    <view a:if="{{!item.payment}}">
	                        <button class="btn" size="mini" type="ghost" a:if="{{!item.showBtn}}" onTap="onpay" data-param="{{{oid:item.oid,id:item.id,index:index}}}">提前交租</button>
	                        <button class="btn" size="mini" type="primary" a:if="{{item.showBtn}}" onTap="onpay" data-param="{{{oid:item.oid,id:item.id,index:index}}}">点击交租</button>
	                    </view>
	                    <view a:else>
	                        <button class="btn" size="mini" type="primary" disabled="{{true}}">已交租</button>
	                    </view>
	                </view>
	            </view>
	        </view>
	    </view> -->
	
	
	
	</view>
</template>

<script>
export default {
		components: {},
		data() {
			return {
			    query:'',
				productOrderRecordVoList:[],
		
				buyBreakSta: false, //是否是归还订单
				isRefresh:false,
				surplusNum: 0,
				thisMonthIndex: 0,
				oid: '',
				goodsData: {}
			};
		},
		onLoad(query) {
			console.log(query)
			let id = query.param;
			this.query = query
			this.oid = id
			this.getoOrderBill(id);
		},
		// onBackPress: function() {
		// 	this.getoOrderBill(this.oid);
		// 	return true; // 必须返回true，否则页面将无法返回
		// },
		methods: {
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			 orderBuyout(e){
			      if(this.surplusNum < 1){
			        my.showToast({
			          content: '该账单已经全部还清！'
			        })
			        return;
			      }
			     uni.navigateTo({
			         url:`/pages/order/buyout/index?oid=`+ this.oid
			     })
			    },
			 getoOrderBill(oid){
				let that = this
				const time = new Date().setHours(0,0,0,0)/1000+(24*60*60);
				console.log(888999,(time));
				let timer = new Date();
				let yy = timer.getFullYear();
				let MM = timer.getMonth() + 1;
				let date = timer.getDate() ;
				MM = MM < 10 ? ('0' + MM) : MM;
				date = date < 10 ? ('0' + date) : date;
		
				let nowTimer = yy+'/'+MM+'/'+date;
		
				that.$http('order.detail', {
					id: oid,
				}, '加载中...').then(res => {
					console.log('dingdan',res)
					let goodsData =  JSON.parse(res.data.params);
					let goodsType = goodsData.detail.split(' ')[0];
					console.log(999,goodsType)
					if(goodsType == '租完归还'){
					  that.buyBreakSta = true
					}
		
					let productOrderRecordVoList = res.data.productOrderRecordVoList;
		
					let thisMonthIndex = 0;
					productOrderRecordVoList.forEach((item,index)=>{
						item.thisMonth = false;
						// item.showBtn = false;
						
						// if(time>item.expiretime) {
						//     item.showBtn = true
						// };
						
						item.time = that.upTime("%Y/%M/%D",time);
						item.createtime = that.upTime("%Y/%M/%D",item.createtime);
						item.duetime = that.upTime("%Y/%M/%D",item.duetime);
						item.expiretime = that.upTime("%Y/%M/%D",item.expiretime);
						item.payPrice = ((item.price - item.paide)/100).toFixed(2);
						item.price = (item.price/100).toFixed(2);
		
						// let extimTimer = item.expiretime.substring(0,7);
						let extimTimer = item.expiretime;
		
						console.log('账单日期',extimTimer)
						console.log('今日日期',nowTimer)
						if(extimTimer == nowTimer){
						  item.thisMonth = true;
						  thisMonthIndex = index;
						}
		
						
					})
					let timehan = productOrderRecordVoList[thisMonthIndex].expiretime.split('/');
					productOrderRecordVoList[thisMonthIndex].timerHanZi = timehan[0] + '年' + timehan[1] + '月' + timehan[2] + '日'
		
					let PriceTrue = 0;
					let PriceFalse = productOrderRecordVoList.length;
					let grossRent = 0;
					let paid = 0;
					let unpaid = 0;
		
					 productOrderRecordVoList.forEach(item=>{
					  console.log('每期账单',item)
					  let price = Number(item.price)
					  if(item.buyOutRecordType != 0){
						return ;
					  }
					  grossRent+=price 
					  if(item.payment == 1){
						paid+=price 
					  }else if(item.payment == 4){
						let paide = Number((item.paide/100).toFixed(2))
						console.log('部分扣款',price-paide)
						paid+=paide 
						unpaid+=price-paide
					  }else if(item.payment == 0){
						unpaid+=price
					  }
					  console.log('已支付',paid)
					  console.log('未支付',unpaid)
		
					  if(item.payment==1){
						PriceTrue+=1;
					  }
					})
					console.log(123)
		
					let surplusNum = PriceFalse - PriceTrue;
					that.productOrderRecordVoList = productOrderRecordVoList
					that.surplusNum = surplusNum
					that.thisMonthIndex = thisMonthIndex
					that.goodsData = goodsData
					that.isRefresh = true
					that.grossRent = grossRent
					that.paid = paid
					that.unpaid = unpaid
					})
			},
			
			
			upTime(format,time) {
			    if(!time) {
			        return ''
			    }
			    // let format = "%Y-%M-%D %h:%m:%s"
			    format = format ? format: "%Y-%M-%D"
			    time = time.toString().length == 10 ? time*1000:time
			    let dataTime = new Date(time)
			    let year = dataTime.getFullYear()
			    let month = (dataTime.getMonth() + 1).toString().padStart(2, 0)
			    let day = dataTime.getDate().toString().padStart(2, 0)
			    let Hours = dataTime.getHours().toString().padStart(2, 0)
			    let Minutes = dataTime.getMinutes().toString().padStart(2, 0)
			    let Seconds = dataTime.getSeconds().toString().padStart(2, 0)
			    format = format.replace(/(%Y|%M|%D|%h|%m|%s)/g, (n) => {
			        return {
			            '%Y': year, '%M': month, '%D': day, '%h': Hours, '%m': Minutes, '%s': Seconds,
			        }[n]
			    })
				    return format

			},
			earlyRepayment (id) {
				uni.navigateTo({
				    url:`/pages/order/prepayment/index?param=`+ id
				})
			},
			// 支付账单
			async onpay(e){
				var that = this
				console.log('支付账单',e);
				let paymentSta = e.payment;
				if(paymentSta == 1){
					that.$u.toast('本期已经还款过了哦~');
					return;
				}
				const oid = e.oid,
				id = e.id,
				index = that.thisMonthIndex;
				// that.$Router.replace({
				//   path: '/pages/order/payment/method',
				//   query: {
				//     orderId: res.data.id,
				//     payState: res.data.status > 0 ? "success" : "paying",
				//     orderType: "goods",
				//   },
				// });
				that.$Router.replace({
				  path: '/pages/order/payment/method',
				  query: {
				    price: e.payPrice,
					id: e.id,
					oid: e.oid,
					tit: e.tit,
					buyout:0,
					manyId:0
				  }
				});
				// that.$http("goods.alipay", {id:e.id,oid:e.oid}).then((pay) => {
				// 	console.log('支付1',pay)
				// 	uni.requestPayment({
				// 		provider: 'alipay',
				// 		orderInfo: pay.data, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
				// 		success: function (res) {
				// 			that.$u.toast('支付成功！');
				// 			let productOrderRecordVoList = that.productOrderRecordVoList;
				// 			productOrderRecordVoList[index].payment = 1;
				// 			that.productOrderRecordVoList = productOrderRecordVoList;
				// 			that.jump('/pages/order/list', { type: '-2' })
				// 		},
				// 		fail: function (err) {
				// 			that.$u.toast('支付失败！');
				// 			console.log('fail:' + JSON.stringify(err));
				// 		}
				// 	});
								
				// })
			},

		}
	};
</script>

<style lang="scss">
/* 老 */
/* page {
    background-color: #E9E7E8;
}
.bill-centent {
    padding-top: 60rpx;
}
.bill-item {
    margin: 0 20rpx 20rpx;
    width: 710rpx;
    height: 260rpx;
    padding:0 10rpx;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 15rpx;
}
.item-top {
    width: 100%;
    height: 60rpx;
    border-bottom: 1rpx solid #ccc;
    padding: 0 20rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 26rpx;
    font-weight: 600;
}
.item-top text:nth-child(2) {
    margin-left: auto;
}

.item-main {
    width: 100%;
    height:180rpx;
    display: flex;
}
.main-left {
    width: 50%;
    height: 180rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
    line-height: 50rpx;
    color: #333;
}
.main-right {
    width: 50%;
    padding-top: 40rpx;
    box-sizing: border-box;
    font-size: 26rpx;
    color: #9E9E9E;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.main-right view:last-child {
    padding: 0 20rpx ;
    box-sizing: border-box;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

.btn {
    border-radius: 10rpx;
    padding:0 20rpx;
    font-size: 24rpx;
} */

page {
  background: #F7F8F9;
}


.billWrap{
  position: relative;
}

.top_bc{
  width: 100vw;
  height: 380rpx;
  background: linear-gradient(180deg, #364E7F 0%, #F7F8F9 100%);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}


.content{
  width: 718rpx;
  margin: 0 auto;
  padding-top: 24rpx;
  position: relative;
  z-index: 2;
}
.content_border{
  width: 718rpx;
  height: 20rpx;
  background: #FFFFFF;
  border-radius: 15rpx;
  opacity: 0.2;
}

.con{
  width: 702rpx;
  margin: -12rpx auto 0;
  background: #FFFFFF;
  padding-bottom: 40rpx;
}

.con_top{
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding-top: 48rpx;
}
.con_top_text{
  font-size: 28rpx;
  color: #767D8F;
  line-height: 40rpx;
}

.buyBreak{
  width: 402rpx;
  height: 56rpx;
  /* background: rgba(22, 119, 255, 0.07); */
  background: linear-gradient(352deg, #ffcb31 0%, #ffcb31 100%);
  border-radius: 28rpx;
  font-size: 28rpx;
  /* color: #767D8F; */
  color: #333;
  font-weight: bold;
  line-height: 56rpx;
  margin: 20rpx auto 0;
  text-align: center;
}
.buyBreak_icon{
  font-size: 26rpx;
  line-height: 56rpx;
  margin-left: 2rpx;
}



.con_top_num{
  font-size: 72rpx;
  font-weight: bold;
  color: #333333;
  line-height: 100rpx;
  margin: 12rpx 0;
}
.con_top_num_text{
  font-size: 28rpx;
  font-weight: 400;
  color: #767D8F;
  line-height: 40rpx;
  margin-left: 8rpx;
}
.con_top_border{
  width: 100%;
  margin: 33rpx 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.con_top_border_circle{
  width: 34rpx;
  height: 34rpx;
  border-radius: 50%;
  background: linear-gradient(180deg, #D0E2FB 0%, #E3EDFA 100%);
  position: relative;
  top: -1rpx;
}
.con_top_border_circleT{
  background: #F7F8F9;
}
.con_top_border_line{
  width: 606rpx;
  height: 0rpx;
  border: 2rpx dashed #EEEEEE;
}
.con_top_border_circleL{
  left: -17rpx;
}
.con_top_border_circleR{
  left: 17rpx;
}

.residue_tit{
  font-size: 30rpx;
  font-weight: bold;
  color: #333333;
  line-height: 42rpx;
  margin-top: 14rpx;
  padding-left: 24rpx;
}


.list{
  width: 100%;
  height: 706rpx;
  margin-top: 40rpx;
  overflow: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 0 24rpx;
}
.list_min{
  width: 100%;
  height: 122rpx;
  display: flex;
  justify-content: space-between;
}
.list_min_timer{
  width: 160rpx;
  text-align: right;
  padding-top: 6rpx;
}
.list_min_timer_top{
  font-size: 20rpx;
  color: #767D8F;
  line-height: 28rpx;
}
.list_min_timer_bot{
  font-size: 28rpx;
  font-weight: bold;
  color: #767D8F;
  line-height: 40rpx;
  margin-top: 6rpx;
}
.list_min_timer_botT{
  font-size: 32rpx;
  font-weight: bold;
  color: #ffcb31;
}
.list_min_linellae{
  width: 18rpx;
  position: relative;
}
.list_min_linellae_round{
  width: 18rpx;
  height: 18rpx;
  border-radius: 50%;
  background-color: #fff;
  box-sizing: border-box;
  border: 4rpx solid #767D8F;
  position: absolute;
  left: 0;
  top: 52rpx;
}
.list_min_linellae_roundT{
  border: 4rpx solid #ffcb31;
}
.list_min_linellae_vertical{
  width: 2rpx;
  height: 122rpx;
  background-color: #E4E5E9;
  margin: 0 auto;
}
.list_min_num{
   width: 150rpx;
	font-size: 28rpx;
	font-weight: bold;
	color: #767D8F;
	line-height: 122rpx;
}
.list_min_numT{
  font-size: 32rpx;
  font-weight: bold;
  color: #ffcb31;
}
.list_min_staText{
   width:300rpx;
    font-size: 28rpx;
    color: #767D8F;
    line-height: 122rpx;
    text-align: right;
}
.list_min_staTextT{
  color: #ffcb31;
}





.con_bottom_circle{
  width: 600rpx;
  position: absolute;
  bottom: -17rpx;
  left: 51rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.con_bottom_circle_min{
  width: 34rpx;
  height: 34rpx;
  border-radius: 50%;
  background-color: #F7F8F9;
}



.bottom_zhan{
  width: 100vw;
  height: 250rpx;
}


.footer{
  width: 100vw;
  height: 200rpx;
  background-color: #FFF;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  padding-top: 24rpx;
}
.footer_L{
  width: 324rpx;
  height: 88rpx;
  background: #FFFFFF;
  border-radius: 50rpx;
  border: 2rpx solid #ffcb31;
  font-size: 32rpx;
  font-weight: bold;
  color: #ffcb31;
  line-height: 88rpx;
  letter-spacing: 2rpx;
  text-align: center;
}
.footer_R{
  width: 324rpx;
  height: 88rpx;
  background: linear-gradient(352deg, #ffcb31 0%, #ffcb31 100%);
  border-radius: 50rpx;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  line-height: 88rpx;
  letter-spacing: 2rpx;
  text-align: center;
  margin-left: 22rpx;
}

.rent_planning{
  display:flex;
  justify-content:space-between;
}
.rent_planning_text1{
  flex: 1;
  margin: 5px;
}

.rent_planning_text2{
  text-align:center;
}

.rent_planning_text3{
  color:#767D8F;
  font-size: 28rpx;
  text-align:center;
}
</style>
